import React, { useState, useEffect } from 'react'
import { Table, Card, Divider, List, Badge, Button, Tooltip } from 'antd'
import './FormComponents.scss'
import {
  FileTextOutlined,
  FilePdfOutlined,
  WarningFilled,
} from '@ant-design/icons'
import timeSetting from '../../timeSetting/timeStting'
import axios from 'axios'
const formTitle = (
  <div className="FormComponentsTitle">
    <p>WEEKLY TIMESHEET</p>

    <div className="FormComponentsTitle-right">
      <p>
        <WarningFilled style={{ margin: '0 10px' }} />
        Not Submitted Due on: Apr 29,2016
      </p>
      <Divider
        type="vertical"
        style={{ borderColor: '#fff', height: '20px', borderWidth: '2px' }}
      />
      <Button
        icon={<FileTextOutlined />}
        type="primary"
        className="FormComponentsTitle-icon"></Button>
      <Tooltip placement="top" title="导出为PDF">
        <Button
          icon={<FilePdfOutlined />}
          type="primary"
          className="FormComponentsTitle-icon"></Button>
      </Tooltip>
    </div>
  </div>
)

const formColumns = [
  {
    dataIndex: 'WEEK',
    key: 'WEEK',
    render: (text) => (
      <span style={{ fontWeight: 600, fontSize: 14 }}>{text}</span>
    ),
    align: 'right',
    width: '175px',
  },
  {
    dataIndex: 'notSubmittedDue',
    key: 'age',
    render: (text) => {
      return <span>{text}</span>
    },
  },
]

const formData = [
  {
    key: '1',
    WEEK: 'NAME:',
    notSubmittedDue: 'ALLEN,JOE',
  },
  {
    key: '2',
    WEEK: 'BRANCH:',
    notSubmittedDue: 'MIAMI,FL(345)',
  },
  {
    key: '3',
    WEEK: 'DEPARTMENT:',
    notSubmittedDue: 'MARKETING(201)',
  },
  {
    key: '4',
    WEEK: 'PERIOD:',
    notSubmittedDue: '4/3/2016 - 4/9/2016',
  },
]

const formColumnsLast = [
  {
    dataIndex: 'Title',
    key: 'Title',
    align: 'center',
    width: 100,
    onCell: (_) => {
      if (_?.rowSpan === 4) {
        return {
          rowSpan: 4,
          style: {
            fontWeight: 600,
            fontSize: 16,
          },
        }
      }
      if (_?.rowSpan === 2) {
        return {
          rowSpan: 1,
          colSpan: 2,
          style: {
            fontWeight: 600,
            fontSize: 16,
          },
        }
      }
      return { rowSpan: 0 }
    },
  },
  {
    dataIndex: 'InOut',
    key: 'InOut',
    width: 35,
    align: 'center',
    onCell: (_) => {
      if (_?.rowSpan === 2) {
        return {
          rowSpan: 0,
        }
      }
    },
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Sun</p>
        <span>{timeSetting.getSunDay()}</span>
      </div>
    ),
    dataIndex: 'sunday',
    key: 'sunday',
    align: 'center',
    width: 120,
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Mon</p>
        <span>{timeSetting.getMonDay()}</span>
      </div>
    ),
    dataIndex: 'monday',
    key: 'monday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Tue</p>
        <span>{timeSetting.getTueDay()}</span>
      </div>
    ),
    dataIndex: 'tuesday',
    key: 'tuesday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Wed</p>
        <span>{timeSetting.getWedDay()}</span>
      </div>
    ),
    dataIndex: 'wednesday',
    key: 'wednesday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Thu</p>
        <span>{timeSetting.getThuDay()}</span>
      </div>
    ),
    dataIndex: 'thursday',
    key: 'thursday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Fri</p>
        <span>{timeSetting.getFriDay()}</span>
      </div>
    ),
    dataIndex: 'friday',
    key: 'friday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Sat</p>
        <span>{timeSetting.getSatDay()}</span>
      </div>
    ),
    dataIndex: 'saturday',
    key: 'saturday',
    align: 'center',
  },
  {
    title: (
      <div className="formColumnsTitle">
        <p>Total</p>
        <span>Hours</span>
      </div>
    ),
    dataIndex: 'total',
    key: 'total',
    align: 'center',
  },
]

const formDataLast = [
  {
    key: '0',
    Title: 'OHAT',
    sunday: '',
    monday: '7:58 AM',
    tuesday: '8:00 AM',
    wednesday: '',
    thursday: '8:00 AM',
    friday: '7:45 AM',
    saturday: '',
    total: '',
    InOut: 'in',
    rowSpan: 4,
  },
  {
    key: '1',
    Week: 'out',
    sunday: '',
    monday: '12:02 PM',
    tuesday: '12:00 PM',
    wednesday: '',
    thursday: '12:00 PM',
    friday: '12:00 PM',
    saturday: '',
    total: '',
    InOut: 'out',
  },
  {
    key: '2',
    Week: 'in',
    sunday: '',
    monday: '1:00 PM',
    tuesday: '1:00 PM',
    wednesday: '',
    thursday: '1:00 PM',
    friday: '1:00 PM',
    saturday: '',
    total: '',
    InOut: 'in',
  },
  {
    key: '3',
    Week: 'In',
    sunday: '',
    monday: '4:00 PM',
    tuesday: '4:15 PM',
    wednesday: '',
    thursday: '5:00 PM',
    friday: '',
    saturday: '',
    total: '',
    InOut: 'out',
  },
  {
    key: '4',
    Title: 'OHAT Hours',
    sunday: '',
    monday: (
      <span
        style={{ color: 'rgba(84, 110, 127)', fontWeight: 600, fontSize: 16 }}>
        7.75
      </span>
    ),
    tuesday: (
      <span
        style={{ color: 'rgba(84, 110, 127)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    wednesday: '',
    thursday: (
      <span
        style={{ color: 'rgba(84, 110, 127)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    friday: (
      <span
        style={{ color: 'rgba(84, 110, 127)', fontWeight: 600, fontSize: 16 }}>
        4.25
      </span>
    ),
    saturday: '',
    total: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        28.00
      </span>
    ),
    rowSpan: 2,
  },
  {
    key: '5',
    Title: 'CLA',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: '8:00 AM',
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    InOut: 'in',
    rowSpan: 4,
  },
  {
    key: '6',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: '12:00 PM',
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    InOut: 'out',
  },
  {
    key: '7',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: '1:00 PM',
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    InOut: 'in',
  },
  {
    key: '8',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: '5:00 PM',
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    InOut: 'out',
  },
  {
    key: '9',
    Title: 'CLA Hours',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: (
      <span
        style={{ color: 'rgba(84, 110, 127)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    rowSpan: 2,
  },
  {
    key: '10',
    Title: 'Holiday',
    sunday: '',
    monday: '',
    tuesday: '',
    wednesday: '',
    thursday: '',
    friday: '',
    saturday: '',
    total: '',
    rowSpan: 2,
  },
  {
    key: '11',
    Title: 'POT',
    sunday: '',
    monday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        0.25
      </span>
    ),
    tuesday: '',
    wednesday: '',
    thursday: '',
    friday: '',
    saturday: '',
    total: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        0.25
      </span>
    ),
    rowSpan: 2,
  },
  {
    key: '12',
    Title: 'Total Hours',
    sunday: '',
    monday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    tuesday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    wednesday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    thursday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        8.00
      </span>
    ),
    friday: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        4.25
      </span>
    ),
    saturday: '',
    total: (
      <span
        style={{ color: 'rgba(70, 69, 88)', fontWeight: 600, fontSize: 16 }}>
        36.25
      </span>
    ),
    rowSpan: 2,
  },
]

const listData = [
  `Paid Time Off(PTO) Monday(Apr 26,2016):PTO Added - Change mad by John Manager on 01:58 Pm Apr 05,2016 _____ | _____`,
  `OHTA Out Punch Tuesday(Apr 26,2016):updated Last Punch - Change mad by John Manager on 01:58 Pm Apr 05,2016 _____ | _____`,
]

const FormComponents = () => {
  // const [formColumnsLast, setFormColumnsLast] = useState([])
  // const [formDataLast, setFormDataLast] = useState([])
  // useEffect(() => {
  //   const fetchData = async () => {
  //     try {
  //       const response = await axios.get('http://localhost:5000/api/form-data')
  //       setFormColumnsLast(response.data.columns)
  //       setFormDataLast(response.data.data)
  //       console.log('====================================')
  //       console.log(response)
  //       console.log('====================================')
  //     } catch (error) {
  //       console.error('Error fetching data:', error)
  //     }
  //   }

  //   fetchData()
  // }, [])
  return (
    <>
      <Card title={formTitle} className="FormComponents-Card">
        <Table
          className="FormComponents"
          columns={formColumns}
          showHeader={false}
          dataSource={formData}
          pagination={false}
          size="small"
          bordered
          // title={() => formTitle}
        ></Table>
      </Card>
      <Table
        bordered
        className="FormComponents-last"
        columns={formColumnsLast}
        dataSource={formDataLast}
        pagination={false}
        size="small"></Table>
      <List
        header={
          <div className="listFormHeader">
            <span>Timeshheet Changes</span>
          </div>
        }
        bordered
        dataSource={listData}
        renderItem={(item, index) => (
          <List.Item>
            <Badge
              count={index + 1}
              style={{
                marginRight: '5px',
                backgroundColor: 'rgba(33, 190, 222)',
              }}
            />
            {item}
          </List.Item>
        )}
      />
      <div className="listFormFooter">
        <Card className="listFormFooterCard Card1">
          <span>Employee Signature: </span>
        </Card>
        <Card className="listFormFooterCard Card2">
          <span>Data:</span>
        </Card>
        <Card className="listFormFooterCard Card3">
          <span>Approval Signature</span>
        </Card>
        <Card className="listFormFooterCard Card4">
          <span>Data:</span>
        </Card>
      </div>
    </>
  )
}

export default FormComponents
